import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {
  Card,
  Title,
  Paragraph,
  ProgressBar,
  Colors,
  Button,
  Portal,
  Dialog,
} from 'react-native-paper';
import Video from 'react-native-video';
import request from '../../utils/request';
import AsyncStorage from '@react-native-community/async-storage';
import {Value} from 'react-native-reanimated';
export default class player extends Component {
  constructor(props) {
    super(props);
    console.log(this.props);

    this.state = {
      paused: true,
      progress: 0.0,
      visible: false,
      song: this.props.route.params.song,
      userId: '',
      // song: {
      //   songId: '3',
      //   songName: '当真',
      //   songSinger: '李荣浩',
      //   songAlbum: '专辑1',
      //   songPhoto: 'https://picsum.photos/700',
      //   songUrl: 'http://webcu.com.cn/demo.mp3',
      //   songIsVip: '1',
      //   songStatus: '',
      //   songDesc: '',
      // },
    };
    AsyncStorage.getItem('userId').then(value => {
      this.setState({userId: value});
    });
  }

  _handleChange = step => {
    request({
      url: '/song/client/id',
      params: {
        songId: this.state.song.songId + step,
        userId: this.state.userId,
      },
    }).then(resp => {
      if (resp.obj != undefined) {
        this.setState({song: resp.obj});
      } else {
        alert('没有更多歌曲了！');
      }
    });
  };

  _handleNext = () => {};

  _handleEnd = () => {
    this._handleChange(1);
  };

  _handlePaused = () => {
    console.log('aaa');
    const totalState = !this.state.paused;
    console.log(totalState);
    this.setState({paused: !this.state.paused});
  };
  _handleProgress = data => {
    this.setState({progress: data.currentTime / data.seekableDuration});
  };

  render() {
    if (
      this.state.song.songIsVip === 1 &&
      this.state.song.songUrl.trim() === ''
    ) {
      this.state.visible = true;
      return (
        <Portal>
          <Dialog visible={this.state.visible} onDismiss={this._hideDialog}>
            <Dialog.Title>权限不足</Dialog.Title>
            <Dialog.Content>
              <Paragraph>这是VIP专享歌曲，请先开通VIP。</Paragraph>
            </Dialog.Content>
            <Dialog.Actions>
              <Button onPress={() => this.props.navigation.goBack()}>
                返回
              </Button>

              <Button
                onPress={() => {
                  this.setState({visible: false});
                  this.props.navigation.replace('购买会员');
                }}>
                立即开通
              </Button>
            </Dialog.Actions>
          </Dialog>
        </Portal>
      );
    } else {
      return (
        <Card style={styles.card}>
          <Card.Content>
            <Title>{this.state.song.songName}</Title>
            <Paragraph>
              <Text>歌手：{this.state.song.songSinger}</Text>
            </Paragraph>
            <Paragraph>
              <Text>专辑：{this.state.song.songAlbum}</Text>
            </Paragraph>
            <Card.Cover
              style={{marginTop: 10}}
              source={{uri: this.state.song.songPhoto}}
            />

            <ProgressBar progress={this.state.progress} color={Colors.red800} />

            <View style={styles.buttonArea}>
              <Button
                icon="arrow-up-bold-box"
                mode="contained"
                onPress={() => this._handleChange(-1)}>
                上一首
              </Button>

              <Button
                icon="arrow-right-drop-circle"
                mode="contained"
                onPress={this._handlePaused}>
                播放/暂停
              </Button>

              <Button
                icon="arrow-down-bold-box"
                mode="contained"
                onPress={() => this._handleChange(1)}>
                下一首
              </Button>
            </View>

            <Video
              ref={video => (this.player = video)}
              source={{uri: this.state.song.songUrl}}
              volume={1.0}
              paused={this.state.paused}
              playInBackground={true}
              onProgress={data => this._handleProgress(data)}
              onEnd={data => this.onEnd(data)}
              onError={data => this.videoError(data)}
              onBuffer={this.onBuffer}
              onTimedMetadata={this.onTimedMetadata}
            />
          </Card.Content>
          <Portal>
            <Dialog visible={this.state.visible} onDismiss={this._hideDialog}>
              <Dialog.Title>权限不足</Dialog.Title>
              <Dialog.Content>
                <Paragraph>这是VIP专享歌曲，请先开通VIP。</Paragraph>
              </Dialog.Content>
              <Dialog.Actions>
                <Button onPress={() => console.log('Cancel')}>返回</Button>
                <Button onPress={() => console.log('Ok')}>立即开通</Button>
              </Dialog.Actions>
            </Dialog>
          </Portal>
        </Card>
      );
    }
  }
}

const styles = StyleSheet.create({
  card: {
    marginLeft: 10,
    marginRight: 10,
    marginTop: 20,
  },

  buttonArea: {
    marginTop: 20,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginBottom: 20,
  },
});
